"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { User } from "@/types/admin"
import StatCard from "@/components/stat-card"
import ActivityItem from "@/components/activity-item"
import MonthlyTicketsChart from "@/components/monthly-tickets-chart"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function HomePage() {
  const router = useRouter()
  const [currentUser, setCurrentUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const userJson = localStorage.getItem("currentUser")
    if (userJson) {
      setCurrentUser(JSON.parse(userJson))
    } else {
      router.push("/login")
    }
    setLoading(false)
  }, [router])

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-pulse-blue text-primary font-medium">正在加载...</div>
      </div>
    )
  }
  
  if (!currentUser) {
    // This state is briefly hit before the redirect in useEffect completes.
    // Returning null prevents a flash of content.
    return null;
  }

  return <Dashboard />
}

function Dashboard() {
  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-bold tracking-tight mb-2">系统概览</h1>
        <p className="text-muted-foreground">
          欢迎使用安全联锁系统，查看关键指标和最近活动。
        </p>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatCard title="操作票总数" value="24" />
        <StatCard title="执行中" value="3" variant="primary" />
        <StatCard title="已完成" value="18" variant="success" />
        <StatCard title="异常告警" value="1" variant="error" />
      </div>

      {/* 最近活动和月度统计 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="card-shadow">
          <CardHeader>
            <CardTitle className="text-lg flex items-center">
              <span className="inline-block w-1 h-5 bg-primary rounded-full mr-2"></span>
              最近活动
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-0">
              <ActivityItem 
                title="创建操作票: 110kV线路检修" 
                user="operator1" 
                time="10:30" 
              />
              <ActivityItem 
                title="审批通过: 变压器停电操作" 
                user="supervisor1" 
                time="09:15" 
              />
              <ActivityItem 
                title="登录系统" 
                user="admin1" 
                time="08:45" 
              />
              <ActivityItem 
                title="完成操作: 接地线安装" 
                user="operator1" 
                time="08:30" 
              />
            </div>
          </CardContent>
        </Card>

        {/* 月度操作票统计图表 */}
        <Card className="card-shadow">
          <CardHeader>
            <CardTitle className="text-lg flex items-center">
              <span className="inline-block w-1 h-5 bg-primary rounded-full mr-2"></span>
              月度操作票统计
            </CardTitle>
          </CardHeader>
          <CardContent className="h-[350px]">
            <MonthlyTicketsChart />
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
